import FirstTitle from "@/components/FirstTitle";
import SubTitle from "@/components/subTitle";
import EffectContainer from "@/components/effectContainer";

import * as echarts from "echarts";
import { useEffect, useRef, useState } from "react";
import { getCode } from "@/api/codeApi.ts";
import Code from "@/components/code";

export const LineChart = () => {
  const chartRef: any = useRef<HTMLDivElement>(null);
  const myDate1 = ["2017年", "2018年", "2019年", "2020年", "2021年", "2022年"];
  const yData = [54000, 75000, 40000, 50000, 40000, 59000];
  const yData1 = [50, 80, 130, 120, 85, 120];
  function getSymbolData(datas) {
    const arr: any = [];
    for (let i = 0; i < datas.length; i++) {
      arr.push({
        value: datas[i],
        symbolPosition: "end",
      });
    }
    return arr;
  }
  const option: echarts.EChartsOption = {
    grid: {
      containLabel: true,
      top: "18%",
      right: "3%",
      bottom: "3%",
      left: "3%",
    },
    legend: {
      show: true,
      data: ["第一产业(万元)", "发展速度(%)"],
      textStyle: { fontSize: "12px", color: "#ffffff" },
      top: "4%",
    },
    tooltip: {
      trigger: "axis",
      formatter: "农业产值及发展速度<br>{b}：{c}万元<br>{b1}：{c1}%",
      backgroundColor: "rgba(5,61,53,0.5)", //设置背景颜色
      textStyle: {
        color: "#fff",
      },
      borderColor: "rgba(5,61,53,0.5)",
      axisPointer: {
        lineStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "rgba(0, 255, 233,0)",
              },
              {
                offset: 0.5,
                color: "rgba(255, 255, 255,1)",
              },
              {
                offset: 1,
                color: "rgba(0, 255, 233,0)",
              },
            ],
            global: false,
          },
        },
      },
    },
    xAxis: {
      type: "category",
      data: myDate1,
      axisLine: {
        show: true,
        lineStyle: { color: "rgba(9, 80, 67, 1)", type: "solid" },
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        interval: 0,
        show: true,
        fontSize: 12,
        color: "#fff",
        fontFamily: "SourceHanSansCN-Normal, SourceHanSansCN",
      },
    },
    yAxis: [
      {
        axisLine: { show: false },
        axisTick: { show: false },
        axisLabel: {
          show: true,
          fontSize: 12,
          color: "#fff",
          fontFamily: "SourceHanSansCN-Normal, SourceHanSansCN",
          formatter: "{value}",
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: "rgba(9, 80, 67, 1)",
            type: "dashed",
          },
        },
      },
      {
        axisLine: { show: false },
        axisTick: { show: false },
        axisLabel: {
          show: true,
          fontSize: 12,
          color: "#fff",
          fontFamily: "SourceHanSansCN-Normal, SourceHanSansCN",
          formatter: "{value}",
        },
        splitLine: {
          show: false,
          lineStyle: {
            color: "rgba(9, 80, 67, 1)",
            type: "dashed",
          },
        },
        interval: 40,
      },
    ],
    series: [
      {
        name: "第一产业(万元)",
        type: "bar",
        barWidth: "18px",
        showBackground: true,
        backgroundStyle: {
          color: "rgba(11, 173, 142, .12)",
        },
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "rgba(20, 208, 168, 0)" },
            { offset: 1, color: "rgba(25, 225, 183, 1)" },
          ]),
        },
        data: yData,
      },
      {
        name: "发展速度(%)",
        type: "line",
        yAxisIndex: 1,
        lineStyle: {
          color: "#FFA600", //改变折线颜色
        },
        smooth: false,
        showAllSymbol: true,
        symbol: "emptyCircle",
        symbolSize: 6,
        data: yData1,
      },
      {
        type: "pictorialBar",
        symbol: "react",
        symbolSize: [18, 3],
        symbolOffset: [0, -4],
        z: 12,
        itemStyle: {
          color: "#6FE3FF",
        },
        data: getSymbolData(yData),
      },
    ],
  };
  let toolTipTimer;
  const animateFunc = (myChart: any) => {
    clearInterval(toolTipTimer);
    let index = 0;
    toolTipTimer = setInterval(() => {
      myChart.dispatchAction({
        type: "showTip", // 提示框
        seriesIndex: 0,
        dataIndex: index, // 第几行柱子高亮
      });
      if (index == myDate1.length - 1)
        index = 0; //展示到最后一个的时候 从0开始
      else index++;
    }, 1000);
  };
  useEffect(() => {
    let myChart: echarts.ECharts;
    // 监听窗口大小变化，调整图表大小
    const handleResize = () => {
      if (myChart) {
        myChart.resize();
      }
    };
    setTimeout(() => {
      if (chartRef.current) {
        if (myChart != null) {
          myChart.dispose();
        }
        myChart = echarts.init(chartRef.current);
        myChart.setOption(option);
        animateFunc(myChart);
      }
    }, 30);

    window.addEventListener("resize", handleResize);

    return () => {
      window.removeEventListener("resize", handleResize);
      myChart.dispose();
    };
  }, []);
  const [code, setCode] = useState("");
  useEffect(() => {
    getCode("/lineChart/折线图.txt").then(({ data }) => {
      setCode(data);
    });
  }, []);
  return (
    <>
      <FirstTitle title="Echarts" />
      <SubTitle title="折线图 效果" />
      <EffectContainer
        effect={
          <div ref={chartRef} style={{ width: "100%", height: "400px" }}></div>
        }
        code={<Code content={code}></Code>}
      ></EffectContainer>
    </>
  );
};
